<template>
  <a-modal :visible="stageVisible" hide-title simple width="470" @ok="handleAddStageOk" @cancel="handelCloseAddStage">
    <div class="model-content">
      <CustomTitle title="添加客户阶段" />
      <a-form :model="formData" auto-label-width ref="formRef">
        <a-form-item label="客户阶段" field="stageSettingId" :rules="{ required: true, message: '请选择' }">
          <a-select placeholder="请选择" v-model="formData.stageSettingId">
            <a-option :value="item.stageSettingId" v-for="item in stageList" :key="item.stageSettingId">
              {{ item.stageName }}
            </a-option>
          </a-select>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>
<script setup lang="ts">
import type {
  CustomerStage
} from "@/apis/system/type";
import { Message } from "@arco-design/web-vue";
import { stageOptions, addStage } from "@/apis/system";
import { getCurrentInstance } from "vue";

const props = defineProps({
  currentPortraitId: {
    type: String,
    default: ""
  }
});
const $emit = defineEmits(["handleAddStage"]);

const { proxy }: any = getCurrentInstance();

const stageList = ref<CustomerStage[]>([]);
const stageVisible = ref(true);
const formData = ref({ stageSettingId: "" });
const getStageList = async () => {
  // console.log("111")
  const { data } = await stageOptions();
  stageList.value = data ?? [];
};
const handleAddStageOk = async () => {
  if (!(await stageVerify())) {
    return Message.error("请填写完整信息");
  }
  await addStage(props.currentPortraitId, formData.value.stageSettingId);
  Message.success("添加成功");
  stageVisible.value = false
  formData.value.stageSettingId = "";
  $emit("handleAddStage",'confirm');
};

const handelCloseAddStage = async () => {
  await nextTick();
  proxy.$refs.formRef.resetFields();
  stageVisible.value = false;
  $emit("handleAddStage",'cancel');
};

const stageVerify = (): Promise<boolean> => {
  return new Promise(async resolve => {
    proxy.$refs.formRef.validate((error: any) => {
      resolve(error == void 0);
    });
  });
};

getStageList();
</script>

<style scoped lang="scss">
@import "../process";
</style>